Nuxt.jsで列挙型を使う(with vue-property-decorator)

#Vue.js

カトアキ

2020.10.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

vue-property-decoratorを使ってNuxt.jsアプリケーションを作る際に、列挙型を設定したくなったのですが、まだ経験はなかったので、どこにどんなことを書けばいいんだっけ？というのを調べつつ、自分への備忘録も兼ねて記事化しました。

別記事で作成したサンプルアプリケーションに対して、姓名の他に血液型を追加し、血液型がABO式の値（「A」「B」「O」「AB」）しか指定できないように列挙型に設定を行ってみた、という内容になりまます。

やってみたこと

実施内容

$ vim models/definitions.ts
$ vim components/TestComponent.vue
$ vim pages/index.vue

models/definitions.ts

// ABO式を利用する
export enum BloodType {
  TYPE_A = "A",
  TYPE_B = "B",
  TYPE_O = "O",
  TYPE_AB = "AB"
}

export interface User {
  firstName: string
  lastName: string
  bloodType: BloodType
}

components/TestComponent.vue

<template>
  <div>
    Name: {{ fullName }}
    Message: {{ message }}
    BloodType: {{ bloodType }}
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { BloodType, User } from "../models/definitions";

@Component
export default class TestComponent extends Vue {
  @Prop({ type: Object, required: true }) readonly user!: User

  message: string = 'This is a message'

  get fullName (): string {
    return `${this.user.firstName} ${this.user.lastName}`
  }

  get bloodType (): BloodType{
    return this.user.bloodType
  }
}
</script>

pages/index.vue

<template>
<div>
  <h1>This is Test</h1>
  <TestComponent :user="testUser" />
</div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { BloodType, User } from "../models/definitions";
import TestComponent from "~/components/TestComponent.vue";

@Component({
  components: {
    TestComponent,
  },
})
export default class IndexPage extends Vue {
  myname:User = {
      firstName: "aki",
      lastName: "kato",
      bloodType: BloodType.TYPE_AB
    }
  get testUser(){
    return this.myname
  }
}
</script>

画面表示

説明

models/definitions.ts について

index.vueとTestComponent.vueの間に、Userオブジェクトを利用する場合には

bloodTypeの指定が可能
bloodTypeはA・B・O・ABのみ指定可能

という制約をこのモジュールを通して作るために、BloodTypeという列挙型とUserというインターフェースを定義しました。

components/TestComponent.vue について

以前別記事で作成したものに対して、 definitions.ts のインポートと bloodType を算出プロパティ経由で画面表示する部分を追加しました。

before.vue

<template>
  <div>
    Name: {{ fullName }}
    Message: {{ message }}
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

interface User {
  firstName: string
  lastName: string
}

@Component
export default class TestComponent extends Vue {
  @Prop({ type: Object, required: true }) readonly user!: User

  message: string = 'This is a message'

  get fullName (): string {
    return `${this.user.firstName} ${this.user.lastName}`
  }
}
</script>

after.vue

<template>
  <div>
    Name: {{ fullName }}
    Message: {{ message }}
    BloodType: {{ bloodType }}
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { BloodType, User } from "../models/definitions";

@Component
export default class TestComponent extends Vue {
  @Prop({ type: Object, required: true }) readonly user!: User

  message: string = 'This is a message'

  get fullName (): string {
    return `${this.user.firstName} ${this.user.lastName}`
  }

  get bloodType (): BloodType{
    return this.user.bloodType
  }
}
</script>

pages/index.vue について

TestComponent.vue と同様に definitions.ts のインポートと bloodType を算出プロパティ経由で画面表示する部分を追加しました。

before.vue

<template>
<div>
  <h1>This is Test</h1>
  <TestComponent :user="testUser" />
</div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TestComponent from "~/components/TestComponent.vue";

@Component({
  components: {
    TestComponent,
  },
})
export default class IndexPage extends Vue {
  myname = {
      firstName: "aki",
      lastName: "kato"
    }
  get testUser(){
    return this.myname
  }
}
</script>

after.vue

<template>
<div>
  <h1>This is Test</h1>
  <TestComponent :user="testUser" />
</div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { BloodType, User } from "../models/definitions";
import TestComponent from "~/components/TestComponent.vue";

@Component({
  components: {
    TestComponent,
  },
})
export default class IndexPage extends Vue {
  myname:User = {
      firstName: "aki",
      lastName: "kato",
      bloodType: BloodType.TYPE_AB
    }
  get testUser(){
    return this.myname
  }
}
</script>